{{/*  form-on-page takes in one arg, "form", that is a DICT: { form_id, form_title, and form_thankyou } */}}

{{ $form := .form }}

<h2 class="dark:text-gray-50 font-secondary font-extrabold text-lg leading-tight tracking-tight">
    {{ $form.form_title }}
</h2>

<div class="relative flex pb-16 mt-5">
    <form id="mktoForm_{{ $form.form_id }}"></form>
    <p id="thankyou--{{ $form.form_id }}" class="hidden pt-10 pb-14">
        {{ $form.form_thankyou }}
    </p>
</div>

<script>
    const formID = {{ $form.form_id }};

    /*  this function ends with 2 to discern it from the baseof loadMarketoForm() that is built into every page  */
    const loadMarketoForm2 = () => {
        MktoForms2.loadForm('//lp.datadoghq.com', '875-UVY-685', formID, (form) => {
            const formOnPage = document.getElementById(`mktoForm_${formID}`);

            formOnPage.removeAttribute("style");
            formOnPage.setAttribute("class", "mktoForm flex flex-col");

            function displayThankYouMessage() {
                const thankyouMessage = document.getElementById(`thankyou--${formID}`);

                /*  Hide form, unhide thankyou message  */
                formOnPage.classList.add('hidden');
                thankyouMessage.classList.remove('hidden');
            }

            form.onSuccess((values, followUpUrl) => {
                displayThankYouMessage();

                /*  No redirect  */
                return false;
            })
        });
    };

    window.addEventListener("load", loadMarketoForm2);
</script>